@charset "utf-8";
$zcm:20;
@function r($px) {
    @return $px/$zcm * 1rem;
}

* {
    margin: 0;
    padding: 0;
    list-style: none;
}

html,
body {
    width: 100%;
    height: 100%;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
}
header {
    .logo2 {
        width: 100%;
        height: r(208);
        img {
            width: 100%;
            height: 100%;
        }
    }
    .sm {
        width: r(50);
        height: r(50);
        border-radius: 50%;
        position: absolute;
        left: r(10);
        top: r(23);
        overflow: hidden;
        cursor: pointer;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .yy {
        width: r(50);
        height: r(50);
        border-radius: 50%;
        cursor: pointer;
        position: absolute;
        right: r(10);
        top: r(23);
        overflow: hidden;
        
      
    }
    img {
        width: 100%;
        height: 100%;
    }
}
.tran{
    animation: xz 2s linear infinite;
        @keyframes xz{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            }
        }
}
.tanchuang{
    background: url(../img/shuoming/bg3.png) no-repeat;
    background-size: 100% 100%;
    z-index: 999999;
    position: absolute;
    width: r(592);
    height: r(784);
    left: r(25); 
    display: none;
    z-index: 99999999;
    .close{
        position: absolute;
        right: r(-20);
        top: r(-20);
        width: r(82);
        height: r(85);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .info{
        width: r(508);
        font-size: r(30);
        color: #7d4610;
        font-family: "宋体";
        margin: 0 auto;
        margin-top: r(254);
        .box{
            width: r(220);
            height: r(220);
            border: r(2) solid #000000;
            margin: 0 auto;
            margin-top: r(72);
        }
        h3{
            text-align: center;
            margin-top: r(40);
        }
        .logo{
            width: r(168);
            height: r(43);
            margin: 0 auto;
            margin-top: r(10);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}

.shuoming{
    background: url(../img/shuoming/bg3.png) no-repeat;
    background-size: 100% 100%;
    z-index: 999999;
    position: absolute;
    width: r(592);
    height: r(784);
    left: r(25);
    display: none;
    .close{
        position: absolute;
        right: r(-20);
        top: r(-20);
        width: r(82);
        height: r(85);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .info{
        width: r(508);
        margin: 0 auto;
        margin-top: r(222);
        h2{
            font-size: r(34.3);
            text-align: center;
        }
        p{
            font-size: r(24);
            text-align: justify;
            margin-top: r(38);
        }
        h3{
            font-size: r(20);
            text-align: center;
            margin-top: r(100);
        }
        .logo3{
            width: r(168);
            height: r(43);
            margin: 0 auto;
            margin-top: r(10);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
}
.gongxi{
    width: 100%;
    background: url(../img/gongxi/bg1_02.png) no-repeat;
    background-size: 100% 100%;
    display: none;
    z-index: 1;
    position: absolute;
    h2{
        margin-top: r(156);
        text-align: center;
        font-size: r(65.48);
        color: #fff;
        font-family: "宋体";
    }
    .zj{
        width: r(297);
        height: r(383);
        margin: 0 auto;
        margin-top: r(30);
        border-radius: r(20);
        overflow: hidden;
        img{
            width: 100%;
            height: 100%;
        }
    }
     a{
        display: block;
//      position: absolute;
//      left: r(65);
//      bottom: r(43);
        margin: 0 auto;
        margin-top: r(50);
        margin-bottom: r(35);
        border: r(2) solid #7d0000;
        background: #e5004f;
        width: r(508);
        height: r(109);
        border-radius: r(10);
        color: #fff;
        font-size: r(60.72);
        text-align: center;
        line-height: r(109);
    }
}
section {
    .cj {
        ul {
            li {
                width: r(211);
                height: r(275);
//              float: left;
                margin-right: r(2);
                margin-bottom: r(2);
                img {
                    width: 100%;
                    height: 100%;
                }
               
            }
            li:nth-child(1){
                position: absolute;
                left: 0;
            }
            li:nth-child(2){
                position: absolute;
                left: r(213);
            }
             li:nth-child(3){
                position: absolute;
                right: r(0);
            }
            li:nth-child(4){
                position: absolute;
                right: r(0);
                top: r(485);
            }
            #li6{
                position: absolute;
                right: r(0);
                top: r(762);
            }
            li:nth-child(7){
                position: absolute;
                left: r(213);
                top: r(762);
            }
            li:nth-child(8){
                position: absolute;
                left: r(0);
                top: r(762);
            }
            li:nth-child(9){
                position: absolute;
                left: r(0);
                top: r(485);
            }
            
             .active{
                    opacity: .5;
                }
            
            .aa:hover{
                cursor: pointer;
                opacity: .5;
            }
            .aa{
                
                width: r(211);
                height: r(275);
//              float: left;
                margin-right: r(2);
                background: #c4004f;
                position: absolute;
                left: r(213);
                top: r(485);
                overflow: hidden;
                display: block;
                .kaishi {
                    position: absolute;
                    width: r(218);
                    height: r(229);
                    top: r(27);
                    animation: tp .5s linear 0s infinite alternate;
                    @keyframes tp {
                        from {
                            top: r(40);
                        }
                        to {
                            top: r(0);  
                        }
                    }
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .btn {
                    position: absolute;
                    width: r(133);
                    height: r(64);
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                    animation: ani 2s infinite linear;
                    @keyframes ani {
                        0% {
                            opacity: 0.2;
                        }
                        20% {
                            opacity: 0.4;
                        }
                        40% {
                            opacity: 0.6;
                        }
                        60% {
                            opacity: 0.8;
                        }
                        80% {
                            opacity: 0.9;
                        }
                        100% {
                            opacity: 1;
                        }
                    }
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}